<template>
	<view class="dialog-container" v-if="display">
<!--遮罩-->
		<view class="dialog-background" @click="clickToHide"></view>
<!--主窗体-->
		<view class="dialog-main">
			<view class="dialog-title">{{title}}</view>
			<slot></slot>
			<text class="dialog-btn" @click="btnHidden">{{confirmText}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dialog-shell",
		data() {
			return {
        display:false
			};
		},
    props: {
      // 检测类型 + 其他验证
      title:{
        type: String,
        required: true,
        validator: (value) =>{
          return value.length >= 0
        }
      },
      confirmText:{
		  type: String,
		  required: false,
		  default:'确定',
		  validator: (value) =>{
		    return value.length >= 0
		  }
	  }
	},
    methods:{
      clickToHide(){
        this.display=false
      },
      show(){
        this.display=true
      },
      btnHidden(){
        this.$emit("confirm")
        this.display=false
      }

    }
  }
</script>

<style>
@import url("dialog-shell.css");
</style>